<template>
	<view class="index_goods_list">
		<view class="index_goods_list_top">
			<view class="item"><view @click="navClick(0)" :class="params.sort_type=='id'?'font ck':'font'">综合排序</view></view>
			<view class="item"><view @click="navClick(1)" :class="params.sort_type=='goods_sale'?'font ck':'font'"class="font">销量优先</view></view>
			<view class="item">
				<view @click="navClick(2)" :class="params.sort_type=='goods_price'?'font ck':'font'">
					<view class="font_price">价格</view>
					<view class="sort">
						<view class="sort_asc"><uni-icons type="arrowup" :size="12" :color="(params.sort_order=='asc' && params.sort_type=='goods_price')?'#ff0000':''" /></view>
						<view class="sort_desc"><uni-icons type="arrowdown" :size="12" :color="(params.sort_order=='desc' && params.sort_type=='goods_price')?'#ff0000':''" /></view>
					</view>
				</view>
				
			</view>
			<view class="item"><text @click="openDrawer" class="qwicon qwgengduo"></text></view>
		</view>
		
		<!-- 内容主题 -->
		<view class="index_goods_list_content">
			<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback">
				<view class="list">
					<uni-grid :column="2" :show-border="false"  :square="false" :highlight="false">
						<uni-grid-item class="grid_item" v-for="(v,k) in list" :key="k">
							<view class="item" @click="$nav('/pages/goods/info?id='+v.id)">
								<image :src="v.goods_master_image||''" mode="aspectFit"></image>
								<view  class="goods_name">{{v.goods_name||''}}</view>
								<view class="price">
									<text class="goods_price">￥{{v.goods_price||0.00}}</text>
									<text class="market_price">销量: {{v.goods_sale||0}}</text>
								</view>
								
							</view>
						</uni-grid-item>
						
					</uni-grid>
				</view>
			</mescroll-body>
		</view>
		
		<!-- 抽屉 -->
		<uni-drawer mode="right" ref="drawers" :width="280">
			<view style="padding:30rpx;background: #fff;">
				<view @click="classClick(v.id)" :class="v.id==class_id?'class_item ck':'class_item' " v-for="(v,k) in classList" :key="k">{{v.name}}</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				params:{
					page:1,
					per_page:10,
					sort_type:'id',
					sort_order:'desc'
				},
				list:[],
				classList:[],
				sort_type:true,
				class_id:0,
			};
		},
		onLoad(opt) {
			this.class_id = opt.class_id;
			this.params.class_id = opt.class_id;
			this.get_class_children();
		},
		methods:{
			openDrawer(){
				this.$refs.drawers.open();
			},
			get_class_children(){
				let obj = {...this.$api.getGoodsClassChildren}
				obj.url += '/'+this.class_id
				this.$http(obj).then(res=>{
					this.classList = res.data;
				})
			},
			classClick(e){
				this.class_id = e;
				this.params.class_id = e;
				this.mescroll.resetUpScroll();
				this.$refs.drawers.close();
			},
			navClick(e){
				if(e==0){
					this.params.sort_type='id'
					this.params.sort_order = 'desc';
				}else if(e==1){
					this.params.sort_type='goods_sale'
					this.params.sort_order = 'desc';
				}else if(e==2){
					this.params.sort_type='goods_price'
					if(this.params.sort_order == 'desc'){
						this.params.sort_order = 'asc';
					}else{
						this.params.sort_order = 'desc';
					}
					
				}
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				let baseObj = JSON.stringify(this.params);
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				this.params.params = basecode;
				
				this.$http(this.$api.goodsSearch,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss">

.index_goods_list{
	.index_goods_list_content{
		margin:30rpx 30rpx;
		.list{
			.grid_item:nth-child(2n){
				.item{
					margin-right: 0;
					margin-left: 10rpx;
				}
			}
			.item{
				margin-right: 5rpx;
				margin-bottom: 10rpx;
				border-radius: 6rpx;
				background: #fff;
				box-sizing: border-box;
				padding: 20rpx;
				image{width: 100%;background: #eee;border-radius: 6rpx;height: 300rpx;box-sizing: border-box;}
				.comment{color:#999;font-size: $uni-font-size-sm;line-height: 60rpx;padding-left: 5rpx;}
				.price{
					.goods_price{color:$uni-color-error;margin-right: 20rpx;}
					.market_price{color:#ccc;font-size: $uni-font-size-sm;}
				}
				.goods_name{line-height: 60rpx;text-align: left;font-size: $uni-font-size-base;width: 100%;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; }
			}
		}
	}
	.index_goods_list_top{
		margin-top: 1px;
		display: flex;
		background: #fff;
		.item{
			flex: 1;
			text-align: center;
			font-size: $uni-font-size-base;
			line-height: 80rpx;
			height: 80rpx;
			.font{
				.font_price{float: left;margin-right: 10rpx;}
				.sort{float: left;line-height: 16rpx;padding-top: 24rpx;}
				border-bottom: 2px solid #fff;padding:0 20rpx;display: inline-block;
				&.ck{border-bottom-color: $uni-color-error;}
				&:after{content:'';display: block;clear: both;}
			}
			&:last-child{flex: 0 0 90rpx;border-left: 1px solid #eee;}
			
		}
	}
	.class_item{
		font-size: $uni-font-size-base;
		line-height: 100rpx;
		border-bottom: 1px solid #efefef;
		text-align: center;
		&.ck{
			color: $uni-color-error;
		}
	}
}
</style>
